<template>
  <div>
    <van-popup v-model:show="show" :style="{ height: '40%' }" position="bottom" :close-on-click-overlay="false">
      <div class="pk-popup">
        <div class="pk-popup-hd">
          <div class="pk-popup-title"></div>
          <div class="pk-popup-close" @click="onClose"></div>
        </div>
        <div class="pk-popup-bd">
          <div class="pk-popup-bditem" :class="{'pk-popup-bditemdis': setItemValue(item.value)}" v-for="(item, index) in options" :key="index" @click="onEnd(item)">
            <div class="bold">{{ item.label }}</div>
            <div class="pk-popup-closebtn" v-if="setItemValue(item.value)" @click.stop="colseItem(item)">
              <div class="red-color">取消</div>
            </div>
            <div class="pk-popup-closebtn" v-if="!setItemValue(item.value)">
              <div class=" color-blur">选择</div>
            </div>
          </div>
        </div>
      </div> 
    </van-popup>
  </div>
</template>

<script setup>
import { ref, defineProps, computed, defineEmits } from 'vue'
const emit = defineEmits(['onClose', 'onEnd', 'onColseItem'])
const show = ref(true)
const props = defineProps({
  modelValue:{
    type: String,
    default: ''
  },
  placeholder:{
    type: String,
    default: ''
  },
  options: {
    type: Array,
    default: () => []
  },
  selValue: {
    type: Array,
    default: () => []
  },
  data: {
    type: Object,
    default: () => {}
  }
})


const setItemValue = (e) => {
  console.log('-------setItemValue-------------', props.data.optionsType, props.data.showType)
  if (props.data.optionsType == 2 && props.data.showType == 1) {
    return false
  }
  return props.selValue.includes(e)
}

const onClose = () => {
  emit('onClose')
}

const onEnd = (e) => {
  if (setItemValue(e.value)) {
    return
  }
  emit('onEnd', e) 
}

const colseItem = (e) => {
  console.log('-------------popup-colseItem-------------')
  emit('onColseItem', e) 
}
</script>

<style lang="scss" scoped>
.pk-popup{
  height: 100%;
  display: flex;
  flex-direction: column;
  &-hd{
    height: 40px;
    line-height: 40px;
    text-align: center;
    display: flex;
    flex-direction: row;
    margin-top: 12px;
  }
  &-title{
    flex:1
  }
  &-close{
    height: 40px;
    width: 40px;
    padding: 0 12px;
    background: url("@/assets/icon/closeicon.png") center center no-repeat;
    background-size: 32px auto;
  }
  &-bd{
    flex: 1;
    overflow-y: auto;
    padding: 16px 12px;
  }

  &-bditem{
    height: 40px;
    line-height: 40px;
    background: #fff;
    border-radius: 4px;
    border: #ddd 1px solid;
    position: relative; 
    margin-bottom: 12px;
    padding: 0 12px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  &-closebtn{
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    color: #666;
  }
  &-bditemdis{
    border: #e8e7e9 1px solid;
    color: #e8e7e9;
  }
}
</style>